<template>
	<view class="pages">
		 <view class="nav1">
		 	<view class="nav2 fonts">货主：{{uinfo.hzdwid}}</view>
		 	<view class="nav3 ovh" >
		 		<view class="nav4 fonts">委托单号：</view>
		 		<view class="nav4 ovh">
		 			<view style="nav4 fonts ovh">
						<view class="wtd1">{{orderon}}</view>
					</view>
		 		</view>
				<view @click="cxorder" class="nav4 ovh seach">查询</view>
		 	</view>
			<view class="titles">常用车队</view>
		
			<view class="listv">
				<view class="listvitem" @click="xzitem(item)" :class="{itv:item.checked==true}" v-for="item in sqcdlist" :key="item.cdid">{{item.cdname}}</view>
			</view>
			<view class="nav5 fonts kdu">
				<view class="nav4 fonts ovh">授权保税港区：</view>
				<view class="nav6">
						<view class="sqsq1"  :class="{itv:sqbsid==1}" @click="sqbsq" >授权</view>
				</view>
			</view>
			
			
			<view class="nav5 fonts kdu">
				<view class="nav4 fonts ovh">授权开始日期：</view>
				<view class="nav6">
						<view class="nav7 fonts">{{date1}}</view>
						<button class="nav8" type="primary" @click="onShowDatePicker('date')">选择日期</button>	
				</view>
			</view>
			
			
			<view class="nav5 fonts kdu">
				<view class="nav4 fonts ovh">授权结束日期：</view>
				<view class="nav6">
						<view class="nav7 fonts">{{date2}}</view>
						<button class="nav8" type="primary" @click="onShowDatePicker1('date')">选择日期</button>	
				</view>
			</view>
			
			
			<view style="overflow: hidden;margin-bottom: 40px;">
				<view class="sqds1">授权吨数：</view>
				<view class="sqds2">
					<input  type="text" v-model="dnum"/>
				</view>
				<view class="sqds3">吨</view>
			</view>
			<view @click="addsq" class="but">
					授权
			</view>
		 </view>
		<view v-show="cxorderons"  class="ck" style="border: 1px solid #3c77b7;">
			<view style="padding: 10px;margin-bottom: 10px; background-color: #3c77b7;overflow: hidden;">
				<view style="float: right;padding: 3px;font-size: 15px;color: #ffffff;font-weight: 600;" @click="qxcp">关闭</view>
			</view>
		<view style="overflow: hidden;height: 40px;">
			<view class="cpmc" >委托单号：</view>
				<view class="cpss" >
					<input style="border-bottom: 1px solid #3c77b7;line-height: 60px;height: 50px;" type="text" v-model="orderons"/>
				</view>
				<view class="cx"  @click="seachorderons">查询</view>
		</view>
		<view v-if="items4.length>0" style="overflow: auto;height:300px;border:1px solid #3c77b7;margin-top:10px;margin-bottom:10px">
				<view class="navcg"  :class="{atvxz:cur==item.consign_no}"  v-for="(item,index) in items4" :key="index"  @click="xz(item)" >
					<view style="width: 50%;float: left; font-size: 18px;height: 40px;line-height: 40px;padding-left: 10px;">{{item.consign_mark}}</view>
					<view style="width: 50%;float: left; font-size: 18px;height: 40px;line-height: 40px;">货名：{{item.cargo_nam}}</view>   
				</view>
		</view>
		<view v-if="items4.length == 0" style="overflow: auto;height:300px;border:1px solid #3c77b7;margin-top:10px;margin-bottom:10px">
			<view>暂无数据</view>
		</view>
			<view @click="qxcp" class="qrxz">确认选择</view>
		</view>
		<u-calendar :show="show" mode="multiple" :maxCount="2" @confirm="confirm" @close="closes"></u-calendar>
		<tabBar :pagePath="'/pages/shoquan/shoquan'"></tabBar>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				uinfo:'',	
				sqcdlist:[],
				items:[],
				orderon:'',
				dnum:'',
				date: new Date().toISOString().slice(0, 10),
				date1: new Date().toISOString().slice(0, 10),
				date2: new Date().toISOString().slice(0, 10),
				value: '',
				value1: '',
				showPicker: false,
				showPicker1: false,
				type: 'rangetime',
				orderons:'',
				items4:[],
				current:'',
				cxorderons:false,
				orderinfo:'',
				hname:'',
				cur:'',
				shipnam:'',
				hc:'',
				czgc:'',
				show:false,
				sqbsid:2,
			}
		},
		async onLoad(){
			this.date = getDateTime.dateTimeStr('y-m-d')
			this.date1 = getDateTime.dateTimeStr('y-m-d')
			this.date2 = getDateTime.dateTimeStr('y-m-d')
			this.getuserinfo();
			this.gethzbdsqcdlist();	
		},
		methods: {
			closes(){
				this.show = false
			},
			confirm(e){
				console.log(e)
				console.log(e.length)
				if(e.length==1){
					this.date1 = e[0]
					this.date2 = e[0]
				}else{
					this.date1 = e[0]
					this.date2 = e[1]
				}
			
				// this.addinfo.startime = e[0]
				// this.addinfo.endtime = e[1]
				this.show = false
			},
			change(e) {
				console.log(e);
				this.date1 = e.fulldate
				this.showPicker = false
			},
			change1(e) {
				console.log(e);
				this.date2 = e.fulldate
				this.showPicker1 = false
			},
			xzitem(e){
				console.log(e)
				var items = this.sqcdlist,
					values = e.id;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(items[i].id ==values){
						if(items[i].checked==true){
							this.$set(item,'checked',false)
						}else{
							this.$set(item,'checked',true)
						}
					}
				}
			},
			xz(e){
				console.log(e)
				this.cur = e.consign_no
				this.orderon = e.consign_mark
				this.hname = e.cargo_nam
				this.shipnam =e.ship_nam
				this.czgc = e.oper_proc
				this.orderinfo = e
				this.hc = e.voyage
			},
			qxcp(){
				    this.cxorderons = false
			},
			cxorder(){
					this.cxorderons = true
					this.editorderonslist();
			},
			async seachorderons(){
				let data = {
					name:this.uinfo.hzdwid,
					orderons:this.orderons,
					statusnum:0,
				}
				let res =  await this.$api.editorderonslistsall(data);
				
				let dataall = res.data.data
				// console.log(dataall.hasOwnProperty('code'))
				if(dataall.hasOwnProperty('code')==true){
					this.items4 = []
				}else{
					this.items4 = res.data.data
				}
			},
			async editorderonslist(){
				let data = {
					name:this.uinfo.hzdwid,
					statusnum:0,
				}
				let res =  await this.$api.editorderonslistsall(data);
				let dataall = res.data.data
				// console.log(dataall.hasOwnProperty('code'))
				if(dataall.hasOwnProperty('code')==true){
					this.items4 = []
				}else{
					this.items4 = res.data.data
				}
			},

			async gethnameinfo(e){
				let data = {
					name:e
				}
				let res =  await this.$api.gethnameinfo(data);
				console.log(res.data);
				this.hname = res.data.data.cargo_nam
			},
				
				
			async addsq(){
				// console.log(this.sqcdlist)
				var that = this;
					let cdidall = []
					that.sqcdlist.forEach(item => {
						if (item.checked == true) {
							cdidall.push(item.cdid);  
						}
					});
				let data = {
					hzuid:uni.getStorageSync('uid'),
					hzdwid:this.uinfo.hzdwid,
					cdidall:cdidall,
					orderon:that.orderon,
					hname:that.hname,
					shipnam:that.shipnam,
					hc:that.hc,
					czgc:that.czgc,
					swg:that.sqbsid,
					// orderon:4000322,
					// hname:'石头',
					dnum:that.dnum,
					sqstartime:this.date1,
					sqendtime:this.date2,
					orderinfo:JSON.stringify(this.orderinfo)
				}
				// console.log(data)
				let res =  await this.$api.addsqcdhz(data);
				console.log(res.data)
				if(res.data.code==0){
					let data1 = {
						uid:uni.getStorageSync('uid'),
						msg:'货主授权委托单号'+that.orderon+'给车队',
						lv:1,
						type:5,
						cz:JSON.stringify(data)
					}	
					await this.$api.addlogs(data1)	
					uni.navigateTo({
						url:"/pages/sjcx/sjcx"
					})
				}else{
					uni.showToast({
					  title:  res.data.msg,	
					  icon:'none',
					  duration: 2000
					});
				}
			},
			onShowDatePicker(){
					this.show = true;
			},
			onShowDatePicker1(){
					this.show = true;
			},
		
			async getuserinfo(){
				let data = {
					id:uni.getStorageSync('uid')
				}
				let res =  await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if(res.data.code==0){
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);
					this.uinfo = res.data.data
				
				}
			},
			async gethzbdsqcdlist(){
				let data = {
					uid:uni.getStorageSync('uid')
				}
				let res = await this.$api.gethzbdsqcdlist(data)
				console.log(res.data);
				this.sqcdlist = res.data.data
			},
			sqbsq(){
				let sqbsid = this.sqbsid
				if(sqbsid==1){
					this.sqbsid = 2;
				}else{
					this.sqbsid = 1;
				}
			},
		},
		components: {
			uniCalendar
		}
	}
</script>

<style lang="less" scoped>
	.pages{
		padding-bottom: 50px;
		background-color: #ffffff;
	}
	.nav{
		 height: 30px;
		 line-height: 30px;
	}
	.navs{
		  height: 60px;
		  line-height: 60px;
		  text-align: center;
		  font-size: 20px;
		  // border-right: 1px solid #3c77b7;
		  float: left;
		  width: 80px;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
	.nav1{
		margin-top: 20px;
	}
	.fonts{
		font-size: 20px;
		// font-weight: 600;
		color: #3c77b7;
	}
	.nav2{
		height: 50px;
		line-height: 50px;
		padding-left: 10px;	
	}
	.nav3{
		 height: 60px;
		 padding-left: 10px;
	}
	.nav4{
		height: 60px;
		line-height: 60px;
		float: left;
	}
	.ovh{
		overflow: hidden;
	}
	.titles{
		line-height: 40px;
		height: 40px;
		font-size: 20px;
		padding-left: 10px;
		font-weight: 600;
		color: #3c77b7;
	}
	.checklist{
		border: 1px solid #3c77b7;
	}
	.nav5{
		height: 60px;
		padding-left: 10px;
	}
	.nav6{
		font-size: 20px;
		height: 60px;
		line-height: 60px;
		float: left;
		margin-left: 5px;
	}
	.nav7{
		float: left;
		
	}
	.nav8{
		float: left;
		width: 100px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		margin-top: 10px;
		margin-left: 5px;
		background-color: #3c77b7;
	}
	.kdu{
		width: 100%;
	
	}
	.but{
		width: 90%;
		background-color: #3c77b7;
		text-align: center;
		line-height: 40px;
		height: 40px;
		font-size: 20px;
		color: #ffffff;
		margin: 20PX auto;
		border-radius: 10px;
	}
	.ck{
		z-index:999;
		-moz-opacity:1;
		opacity: 1.0;
		opacity: 1;
		// border: 1px solid #000000;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		//padding: 10upx;
	}
	.seach{
	    background-color: #3c77b7;
	    width: 80px;
	    height: 50px;
	    line-height: 50px;
	    margin-left: 20px;
	    text-align: center;
	    border-radius: 10px;
	    font-size: 20px;
		color: #ffffff;
	}
	.listv{
		overflow: auto;
		height: 240px;
		border: 1px solid #3c77b7;
		background-color: #ffffff;
	}
	.listvitem{
		width: 80%;
		border: 1px solid #3c77b7;
		margin: 10px auto;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 10px;
		font-size: 20px;
	}
	.itv{
		background-color: #3c77b7;
		color: #ffffff;
	}
	.cpmc{
		    float: left;
			width: 25%;
		    height: 40px;
		    line-height: 60px;
		    text-align: center;
	}
	.cpss{
		float: left;
		width: 50%;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #3c77b7;
	}
	.cx{
		float: left;
		width: 20%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #3c77b7;
		color: #ffffff;
		font-weight: 600;
		border-radius: 10px;
	}
	.navcg{
			width: 90%;	
			overflow: hidden;
		    border: 1px solid #5af;
		    font-size: 18px;
		    height: 40px;
			line-height: 40px;
		    border-radius: 10px;
		    margin: 0 auto;
			margin-top: 9px;
	}
	.atvxz{
		 background-color: #3c77b7;
	}
	.qrxz{
		background-color: #3c77b7;
		text-align: center;
		height: 40px;
		color: #ffffff;
		line-height: 40px;
		font-size: 20px;
	}
	.sqds1{
		float: left;
		width: 30%;
		font-size: 20px;
		color: #3c77b7;
		text-align: center;
	}
	.sqds2{
		float: left;
		width: 40%;
		font-size: 20px;
		border-bottom: 1px solid #3c77b7;
	}
	.sqds2 input{
		border-bottom: 3px solid #3c77b7;
		font-size: 20px;
		line-height: 40px;
		height: 30px;
	}
	.sqds3{
		float: left;
		width: 30%;
		font-size: 20px;
		color: #3c77b7;
	}
	.wtd1{
		    border-bottom: 3px solid #3c77b7;
		    line-height: 50px;
		    height: 40px;
		    width: 130px;
		    font-size: 20px;
	}
	.sqsq1{
		border: 1px solid #3c77b7;
		border-radius: 10px;
		height: 30px;
		width: 100px;
		text-align: center;
		margin-top: 13px;
		line-height: 30px;
		font-weight: 600;
	}
</style>
